<template>
	<view class="function">
		<view class="function-view" @click="beginClick()">
			<image  src="../../static/record/kaishi.png"></image>
			<view>开始</view>
		</view>
	<!-- 	<view class="function-view" @click="laststepClick()">
			<image   src="../../static/record/left.png"></image>
			<view>前一步</view>
		</view> -->
		<view class="function-view" @click="playClick()" v-if="is_play  == 0 ">
			<image src="../../static/record/bofang.png"></image>
			<view>播放</view>
		</view>
		<view class="function-view" @click="suspendClick()" v-if="is_play==1">
			<image src="../../static/record/zan.png"></image>
			<view>暂停</view>
		</view>
		
	<!-- 	<view class="function-view" @click="nextstepClick()">
			<image src="../../static/record/right.png"></image>
			<view>下一步</view>
		</view> -->
		
		<view class="function-view" @click="hintClick()">
			<image src="../../static/record/jiesu.png"></image>
			<view>结束</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['schedule','is_fyplay'],
		watch:{
			is_fyplay(e){
				console.log('======');
				console.log(e);
				
				this.is_play  = e;
			}
		},
		created() {
			console.log(this.is_fyplay);
			
			this.is_play  = this.is_fyplay;
		},
		data() {
			return {
				key  : 0,
				is_play: 0,
				Intervaltime : ''
			}
		},
		methods : {
			playClick(){
				let that      = this;
				var schedule  = this.schedule;
				var key       = this.key;
				that.$emit('playChange',1);
				that.is_play  = 1;
			},
			suspendClick(){
				this.is_play  = 0;
				this.$emit('playChange',0);
			},
			beginClick(){
				this.$emit('playChange',2);
			},
			hintClick(){
				this.$emit('playChange',3);
			},
			nextstepClick(){
				var  key       = this.key;
				var  schedule  = this.schedule;
				var  count     = schedule.length;
				if(key+1  <= count){
					if(!schedule[key]['index']){
						this.$emit('functionChange',{'index':-1,'index1':-1})
					}else{
						this.$emit('functionChange',{'index':schedule[key]['index'],'index1':schedule[key]['index1']})
					}
					
					key = key+1;
				}
				this.key  = key;
			},
			laststepClick(){
				this.$emit('laststepChage',1)
			},
		
		}
	}
</script>

<style>
	.function {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 160rpx;
	}
	.function-view  {
		width: 120rpx;
		text-align: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.function-view > image  {
		width: 80rpx;
		height: 80rpx;
		display: block;
		margin: auto;
	}
	.function-view > view {
		padding-top: 10rpx;
	}
</style>